<template>
	<canvas v-if="canvasId" 
	 :id="canvasId" 
	 :canvasId="canvasId" 
	 :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
	 @touchstart="touchStart" 
	 @touchmove="touchMove" 
	 @touchend="touchEnd" 
	 @error="error">
	</canvas>
</template>
<script>
	import uCharts from './u-charts.js';
	var canvases = {};
	
	export default {
		props: {
			chartType: {
				required: true,
				type: String,
				default: 'column'
			},
			opts: {
				required: true,
				type: Object,
				default () {
					return null;
				},
			},
			canvasId: {
				type: String,
				default: 'u-canvas',
			},
			cWidth: {
				default: 375,
			},
			cHeight: {
				default: 250,
			},
			pixelRatio: {
				type: Number,
				default: 1,
			},
			xAxis: {
				type: Object,
				default: () => {
					return {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						itemCount: 4,
						scrollShow: true
					}
				}
			},
			yAxis: {
				type: Object,
				default: () => {
					return {
						gridType: 'dash',
						gridColor: '#707070',
						dashLength: 8,
						splitNumber: 5
					}
				}
			},
			// format:(val)=>{return val.toFixed(1)}
			legend: {
				type: Object,
				default: () => {
					return {show: false}
				}
			},
			title: {
				type: Object,
				default: () => {}
			},
			subtitle: {
				type: Object,
				default: () => {}
			},
			extra: {
				type: Object,
				default: () => {
					return {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 10,
						  labelWidth:0
						}
					}
				}
			}
		},
		mounted() {
			this.init();
		},
		watch:{
			opts: {
				handler (newName, oldName) {
					this.opts = newName
					this.init()
			    },
				immediate: true,
				deep: true
			},
			title: {
				handler (newName, oldName) {
					this.title = newName
					this.init()
			    },
				immediate: true,
				deep: true
			}
		},
		methods: {
			init() {
				switch (this.chartType) {
					case 'column':
						this.initColumnChart();
						break;
					case 'line':
						this.initLineChart();
						break;
					case 'area':
						this.initAreaChart();
						break;
					case 'ring':
						this.initRingChart();
						break;
					case 'radar':
						this.initRadarChart();
						break;
					default:
						break;
				}
			},
			initColumnChart() {
				canvases[this.canvasId] = new uCharts({
					$this: this,
					canvasId: this.canvasId,
					type: 'column',
					legend:this.legend,
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: true,
					categories: this.opts.categories,
					series: this.opts.series,
					enableScroll: false,
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						dashLength:8,
						labelCount: 6 // 默认显示6个
					},
					yAxis: this.yAxis,
					dataLabel: false,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: 20
						}
					}
				});
			},
			initAreaChart() {
				canvases[this.canvasId] = new uCharts({
					$this: this,
					canvasId: this.canvasId,
					type: 'area',
					legend: false,
					fontSize: 11,
					background: '#F2F2F2',
					pixelRatio: this.pixelRatio,
					categories: this.opts.categories,
					series: this.opts.series,
					enableScroll: false,
					dataLabel:false,
					dataPointShape:true,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8,
						itemCount:12,
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
						min:10,
						max:180,
					},
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						area:{
							type: 'straight',
							opacity:0.2,
							addLine:true,
							width:2
						}
					}
				});
			},
			initLineChart() {
				canvases[this.canvasId] = new uCharts({
					$this: this,
					canvasId: this.canvasId,
					type: 'line',
					fontSize: 11,
					legend: this.legend,
					dataLabel: false,
					dataPointShape: false,
					background: '#ffffff', // 设置echarts背景颜色
					pixelRatio: this.pixelRatio,
					categories: this.opts.categories,
					series: this.opts.series,
					animation: true,
					enableScroll: false,
					xAxis: this.xAxis,
					yAxis: this.yAxis,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			initRingChart() {
				canvases[this.canvasId] = new uCharts({
					$this:this,
					canvasId: this.canvasId,
					type: 'ring',
					fontSize:11,
					legend:{show:false},
					title: this.title,
					subtitle: this.subtitle,
					padding: [0,0,0,0],
					extra: this.extra,
					background:'#ffffff',
					pixelRatio: this.pixelRatio,
					series: this.opts.series,
					animation: true,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					disablePieStroke: false,
					dataLabel: false,
				});
			},
			initRadarChart() {
				canvases[this.canvasId] = new uCharts({
					$this:this,
					canvasId: this.canvasId,
					type: 'radar',
					padding: [0,0,0,0],
					fontSize:11,
					legend: { show: false },
					background:'#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: true,
					dataLabel: true,
					categories: this.opts.categories,
					series: this.opts.series,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
				});
			},
			
			// 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改
			changeData(cid,newdata) {
				console.log('canvases', canvases)
				console.log('接收到值', cid, newdata)
				canvases[cid].updateData({
					series: newdata.series,
					categories: newdata.categories
				});
			},
			touchStart(e) {
				if(this.canvasId == 'mingzhong' || this.canvasId == 'group') {
					return // 用来去掉饼图和雷达图的移入tooltip
				}
				canvases[this.canvasId].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
				canvases[this.canvasId].scrollStart(e);
			},
			touchMove(e) {
				canvases[this.canvasId].scroll(e);
			},
			touchEnd(e) {
				canvases[this.canvasId].scrollEnd(e);
			},
			error(e) {
				console.log(e)
			}
		},
	};
</script>

<style scoped>
</style>
